const url = "http://47.112.231.33:3003/";
const headerURL = 'https://cn.bing.com';

$(document).ready(_ => {
  //请求背景图片
  http({url: url}).then(res => {
    console.log(res);
    let index = 0;
    $('#bgimg').css('background-image','url('+headerURL+res.images[index].url+')');
    // 点击切换下一张图片
    $('#nextimg').on('click', function () {
      index ++;
      if (index > 7) return index = 7;
      $('#bgimg').css('background-image','url('+headerURL+res.images[index].url+')');
    });
    // 点击切换上一张图片
    $('#previmg').on('click', function () {
      if(index <= 0) return;
      index --;
      $('#bgimg').css('background-image','url('+headerURL+res.images[index].url+')');
    });

    // 鼠标经过显示信息
    $('#into').on('mouseover', function () {      
      $(this).attr('title', res.images[index].copyright);
      $('#intoLink').attr('href', res.images[index].copyrightlink);
    });

  });
  // 今天的天气
  wearToday(localStorage.getItem('city'));
  
  //点击天气弹出对话框
  $('#weat_diong').hide();
  $('#weat').click(e => {
    e.stopPropagation(); 
    $('#weat_diong').fadeToggle(200);
  });
  //点击空白隐藏
  $('body').click(e => {
    $('#weat_diong').fadeOut(200);
  });
  $('#weat_diong').click(e => {
    e.stopPropagation();
  })
  // 获取四天的天气
  wearFour(localStorage.getItem('city'));
  // 鼠标经过显示修改图标
  $('#weat_diong').mousemove(e => {
    $('.revise').fadeIn(100);
  });
  $('#weat_diong').mouseleave(_ => {
    $('.revise').fadeOut(100);
  });
  // 鼠标点击修改
  $('.revise').click(e => {
    e.stopPropagation();
    let city = $('.diong_city').html();
    $('.diong_city').hide();
    $('.search_city').show().val(city).focus();
  });
  // 离开焦点触发
  $('.search_city').blur(e => {
    e.stopPropagation();
    $('.diong_city').show();
    let searchCityinfo = $('.search_city').val();
    localStorage.setItem('city', searchCityinfo);
    let searchCity = localStorage.getItem("city");  
    $('.search_city').hide();
    wearFour(searchCity);
    wearToday(searchCity);
  })
})

// 4天天气
function wearFour(searchCity){
$('#weat_diong').hide();
$('.bottom').empty('.item');
let weatherURL = '';
if (searchCity) {
  weatherURL = "https://www.tianqiapi.com/free/week?appid=38891595&appsecret=WHpYGqv5&city="+searchCity;
} else {  
  weatherURL = "https://www.tianqiapi.com/free/week?appid=38891595&appsecret=WHpYGqv5";
}
http({url: weatherURL}).then(res => {
  const list = res.data;
  for (let index = 1; index < 5; index++) {
  const date = list[index].date.split('-');     
    $('.bottom').append(`
    <div class="item">
      <div class="date">${date[1]+'/'+date[2]+' '+list[index].wea}</div>
      <div id="weatDiong_img${index}" class="item_img"></div>
      <div class="item_tem">${list[index].tem_night+'ºC~'+list[index].tem_day+'ºC'}</div>
    </div>
    `);
    $('#weatDiong_img'+index).css('background-image', 'url(img/'+list[index].wea_img+'1.png)');
  }
});
}
//今天的天气
function wearToday(searchCity){
  let weatherTodayURL = '';
  if (searchCity) {
    weatherTodayURL = "https://www.tianqiapi.com/free/day?appid=38891595&appsecret=WHpYGqv5&city="+searchCity;
  } else {
    weatherTodayURL = "https://www.tianqiapi.com/free/day?appid=38891595&appsecret=WHpYGqv5";
  }
  http({url: weatherTodayURL}).then(res => {
    $('#city').html(res.city+'天气实况');
    $('#tem').html(res.tem+'ºC '+res.wea);
    $('#weat_img').css('background-image', 'url(img/'+res.wea_img+'.png)');
    $('#win').html(res.win+' '+res.win_speed);
    $('#temHight').html(res.tem_night+'ºC~'+res.tem_day+'ºC');
    $('#air').html('空气质量：'+res.air)
    $('.diong_city').html(res.city)
    $('.diong_img').css('background-image', 'url(img/'+res.wea_img+'1.png)');
    $('.diong_tem').html(res.tem+'ºC ')
  });
}
